<template>
  <section class="container">
    <div class="columns">
      <div class="column is-3">
        <aside class="menu">
          <p class="menu-label">标签</p>
          <ul class="menu-list">
            <li class="menu-list">
              <span class="tag is-primary is-medium">米修在线</span>
            </li>
          </ul>
        </aside>
      </div>
      <div class="column is-9">
        <div class="box content">
          <article class="post">
            <h4>{{ post.title }}</h4>
            <div class="media">
              <div class="media-lest">
                <p class="is-32x32">
                  <i class="fa fa-bold"></i>
                </p>
              </div>
              <div class="media-content">
                <div v-html="post.html"></div>
              </div>
            </div>
          </article>
        </div>
      </div>
    </div>
  </section>
  <div class="container mt-5" style="margin-left:100px; display:flex;justify-content: space-between;align-items: center;">
      <router-link to="/"  class="button is-small is-rounded">
    返回 <i class="fa fa-back"></i>
  </router-link>
  <router-link :to="to" class="button is-small is-rounded is-link ">
    编辑 <i class="fa fa-edit ml-1"></i>
  </router-link>
  </div>
</template>
<script lang="ts">
import { useRoute } from "vue-router";
import { defineComponent } from "vue";
import { useStore } from "@/store";
/**
 * 使用异步的原因在与 进入详情，刷新页面时，没有数据，数据没有加载完成
 */
export default defineComponent({
  name: "PostViewer",
  async setup() {
    const route = useRoute();
    const store = useStore();
    const id = route.params.id as string;
    if (!store.getState().posts.loaded) {
      await store.fetchPosts();
    }
    const post = store.getState().posts.all[id];
    return { post, to: `/posts/${post.id}/edit` };
  },
});
</script>